<template>
    <div v-loading="loading">
        <el-dialog :title="type == 'create' ? '添加长视频分类' : '修改长视频分类'" :visible.sync="visible" width="800px">
            <el-form :model="form">
                <el-form-item label="名称">
                    <el-input placeholder="请输入名称" style="width: 500px" v-model="form.name"></el-input>
                </el-form-item>

                <el-form-item label="上级">
                    <treeSelect :options="data" :props="{ value: 'id', label: 'name', children: 'childrens' }" @getValue="setParent" v-model="form.pid" width="485px"></treeSelect>
                </el-form-item>

                <el-form-item label="排序">
                    <el-input placeholder="请输入排序号" style="width: 500px" v-model="form.sort"></el-input>
                </el-form-item>

                <el-form-item label="类型">
                    <el-select placeholder="选择类型" style="width: 500px" v-model="form.type">
                        <el-option :key="item.value" :label="item.name" :value="item.value" v-for="item in typeList"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="排序类型" v-if="form.type == 'sort'">
                    <el-select placeholder="选择排序类型" v-model="form.mask">
                        <el-option :key="item.value" :label="item.name" :value="item.value" v-for="item in maskList"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="图标">
                    <!-- <SelectIcon @custom-event="eventFun"></SelectIcon> -->
                    <medium @set-content="setMedium" v-model="form.icon"></medium>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeBox">取 消</el-button>
                <el-button @click="submit" type="primary">确 定</el-button>
            </div>
        </el-dialog>
        <el-button @click="toForm()" size="small" style="width: 150px" type="success"  v-permission="['ADMIN','WORK_ADD']">添加</el-button>
        <el-button @click="getworksList()" icon="el-icon-refresh-right" size="small" type="primary" style="margin-left: 2px;">刷新</el-button>
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-table :data="data" :tree-props="{ children: 'childrens' }" max-height="800px" row-key="id" size="small" style="width: 100%">
                <el-table-column label="ID" prop="id"></el-table-column>

                <el-table-column label="名称" prop="name"></el-table-column>
                <el-table-column label="类型" prop="type">
                    <template slot-scope="scope">
                        <div v-if="scope.row.type == 'theme'">主题</div>
                        <div v-else-if="scope.row.type == 'sort'">排序</div>
                        <div v-else>其他</div>
                    </template>
                </el-table-column>

                <!-- <el-table-column label="分类">
                        <template slot-scope="scope">
                            <span v-if="scope.row.cate">{{scope.row.cate.name}}</span>
                            <span v-else>-</span>
                        </template>
                </el-table-column>-->
                <el-table-column label="上级" prop="pid"></el-table-column>
                <el-table-column label="排序" prop="sort"></el-table-column>
                <el-table-column label="图标" prop="icon">
                    <template slot-scope="scope" v-if="scope.row.icon">
                        <el-image :preview-src-list="toArray(scope.row.icon)" :src="scope.row.icon" class="border" style="width: 50px; height: 50px"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="mask" prop="mask"></el-table-column>
                <el-table-column label="添加时间" sortable prop="created_at"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="addForm(scope.row.id)" size="mini" style="padding: 10px" type="primary"   v-permission="['ADMIN','WORK_ADD']">添加</el-button>
                        <el-button @click="toForm(scope.row)" size="mini" style="padding: 10px" type="primary"   v-permission="['ADMIN','WORK_UPDATE']">修改</el-button>
                        <el-popconfirm @confirm="del(scope.row.id)" title="这是一段内容确定删除吗？">
                            <el-button size="mini" slot="reference" style="padding: 10px" type="danger"   v-permission="['ADMIN','WORK_DELETE']">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>
    
<script>
import treeSelect from '@/components/SelectTree/index'
import SelectIcon from '@/components/SelectIcon/index'
import medium from '@/components/medium/index'
export default {
    name:"works-list",
    components: {
        treeSelect,
        SelectIcon,
        medium,
    },
    data() {
        return {
            form: {
                name: '',
                type: '',
                pid: null,
                sort: '',
                icon: '',
                mask: null,
            },
            visible: false,
            loading: false,
            data: [],
            disable: true,
            page: 1,
            moreBut: false,
            tableData: [],
            type: 'create',
            worksId: '',
            typeList: [
                {
                    name: '主题',
                    value: 'theme',
                },
                {
                    name: '排序',
                    value: 'sort',
                },
                {
                    name: '其他',
                    value: 'another',
                },
            ],
            maskList: [
                {
                    name: '最新排序',
                    value: 'new_sort',
                },
                {
                    name: '评论排序',
                    value: 'comment_sort',
                },
                {
                    name: '热门排序',
                    value: 'hot_sort',
                },
                {
                    name: '免费排序',
                    value: 'free_sort',
                },
                {
                    name: '收费排序',
                    value: 'fee_sort',
                },
            ],
        }
    },
    mounted() {
        this.getworksList()
    },
    methods: {
        toArray(str) {
            const arr = []
            arr.push(str)
            return arr
        },

        setMedium(value) {
            this.form.icon = value
        },

        eventFun(data) {
            this.form.icon = data
        },
        disableFun(res) {
            console.log(res, '321')
            this.query.disable = res == true ? 1 : 0
        },
        setParent(value) {
            this.form.pid = value
        },
        beforeInit() {
            console.log()
            this.url = '/admin-menu/index'
            this.init() //重新请求数据
        },
        getworksList() {
            this.loading = true
            let that = this
            this.$request.get('/creation-category/index',{type:'search'}).then((res) => {
                this.loading = false
                this.data = res
                console.log(this.data, 111)
                // this.init()
            }).catch((error) => {
                this.loading = false
            });
        },

        del(id) {
            this.$request.del('/creation-category/delete/' + id).then((res) => {
                this.$message.success('删除成功')
                this.getworksList()
            })
        },

        toForm(form = null) {
            this.visible = true //打开弹出框
            if (form != null) {
                this.type = 'update'
                this.worksId = form.id
                this.form = form
            } else {
                this.type = 'create'
                this.worksId = ''
                this.form = {
                    name: '',
                    type: '',
                    pid: null,
                    sort: '',
                    icon: '',
                    mask: null,
                }
            }
        },

        //添加子集
        addForm(id) {
            this.type = 'create'
            console.log('id', id)
            this.visible = true
            this.form = {
                name: '',
                type: '',
                pid: null,
                sort: '',
                icon: '',
                mask: null,
            }
            // this.worksId = id
            // this.form.pid = id
        },

        //查询作品详情
        getworksInfo() {
            this.$request.get('/creation-category/get/' + this.worksId, this.form).then((res) => {
                this.form = res
            })
        },

        closeBox() {
            this.visible = false
            this.type = 'create'
            this.form = {
                name: '',
                type: '',
                pid: null,
                sort: '',
                icon: '',
                mask: null,
            }
        },

        //提交
        submit() {
            if (!(this.form.name || this.form.sort || this.form.icon)) {
                this.$message({
                    message: '请将信息填写完整！',
                    type: 'warning',
                })
                return
            }
            if (this.type == 'create') {
                this.$request.post('/creation-category/create', this.form).then((res) => {
                    this.$message({
                        message: '添加成功',
                        type: 'success',
                    })

                    this.getworksList()
                    this.closeBox()
                })
            } else {
                this.$request.put('/creation-category/update/' + this.worksId, this.form).then((res) => {
                    console.log(res)
                    this.$message({
                        message: '修改成功',
                        type: 'success',
                    })
                    this.getworksList()
                    this.closeBox()
                })
            }
        },
    },


 
}
</script>
    
<style lang="scss" scoped>
.butBox {
    background-color: rgb(219, 219, 219);
    border: none;
    color: #555;
}
</style>